import React, { Component } from 'react';
import { connect } from "react-redux";
import { withRouter } from 'react-router-dom';
import { message } from 'antd';
import loginAction from '../../redux/action/loginAction';
import './My.scss';
import Personage from '../../components/My/Personage/Personage';
import Member from '../../components/My/Member/Member';
import Orderform from '../../components/My/Orderform/Orderform';
import request from "../../api/api";
class My extends Component {
  state = {
    img:''
  }
  componentDidMount() {
    if (this.props.username === '') {
      message.error('要先登录');
      this.props.history.replace('/app/login')
    }else{
      request({
        url:`/cpi/userInfo/findimg?username=${this.props.username}`,
        method: 'get'
      }).then(res=>{
        if(res.code === 200 && res.imgObj) {
          this.setState({
            img: res.imgObj[0].userImg.path
          })
        }
    })
    }
  }
  
  logout=()=>{
    this.props.loginAction('')
    message.success('退出成功');
    this.props.history.replace('/app/login')
  }
  render() {
    let {username,record,wish,userImg,comment} = this.props
    let { img } = this.state
    return (
      <div className='my'>
        <div className="mine">
          <p className="hp">猫眼电影</p>
          <Personage logout={this.logout} username={username} record={record} wish={wish} userImg={userImg ? userImg : img} comment={comment}/>
          <Member />
          <Orderform />
        </div>
      </div>
    )
  }
}
export default connect(
  state => ({
    username: state.login,
    record: state.record.length,
    wish: state.wish.length,
    userImg: state.userImg,
    comment: state.comment.length
  }), {
  loginAction
})(withRouter(My))